<script setup lang="ts">
// 同el-table的属性和事件。额外提供分页配置pagination对象，对象的属性同el-pagination的属性和事件
// v-on可以绑定一个values是函数数组的对象，形如v-bind绑定对象一样

import { ref} from 'vue'
import {getColSlots} from "./utils"

withDefaults(
	defineProps<{
		columns: { prop: string; label: string; columnKey: string;[key: string]: any }[]
		data?: { [key: string]: any }[]
		height?: string
		pagination?: { [key: string]: any }
		initPageSize?: number
		initPageNum?: number
	}>(),
	{ data: [] as any, initPageSize: 20, initPageNum: 1 }
)

const emits=defineEmits(['reload'])

const tableRef = ref()


defineExpose({
	elTableInstance: tableRef,
})
</script>

<template>
	<div class="my-table">
		<div class="my-table-content" :style="{ height: height ? height : 'auto' }">
			<el-table v-bind="$attrs" :data="data" ref="tableRef">
				<template #empty>
					<slot name="empty">
					  <el-empty :image-size="100" :descrption="$attrs['empty-text']?$attrs['empty-text']:'暂无数据'" >
							<!-- <el-button type="primary" @click="()=>{emits('reload')}">重新加载</el-button> -->
						</el-empty>
				  </slot>
				</template>
				<my-table-col v-for="item in columns" :key="item.prop" :item="item">
					<template v-for="slotName in getColSlots(item,$slots)" :key="slotName" #[slotName]="scope">
						<slot :name="slotName"  v-bind="scope"></slot>
					</template>
				</my-table-col>
			</el-table>
		</div>

		<div class="my-table-pagination" style="margin: 10px 0; display: flex; justify-content: flex-end" v-if="pagination">
			<el-pagination v-bind="pagination" :current-page="pagination.current" :page-size="pagination.size"  />
		</div>
	</div>
</template>

<style lang="scss" scoped></style>

